<template>
	<view class="content">
		<view class="search">
			<view class="search-area">
				<input type="text" placeholder="输入汽车名称"></input>
				<button>搜索</button>
			</view>
		</view>
		<view class="container">
		<home-banner></home-banner>
			<view class="ptitle">热门品牌</view>
			<view class="catelist">
				<view class="citem">
					<navigator url="/pages/products/products">
						<image src="/static/brand1.png" mode="widthFix" />
						<text>现代</text>
					</navigator>
				</view>
				<view class="citem">
					<navigator url="/pages/products/products">
						<image src="/static/brand2.png" mode="widthFix" />
						<text>本田</text>
					</navigator>
				</view>
				<view class="citem">
					<navigator url="/pages/products/products">
						<image src="/static/brand3.png" mode="widthFix" />
						<text>日产</text>
					</navigator>
				</view>
				<view class="citem">
					<navigator url="/pages/products/products">
						<image src="/static/brand4.png" mode="widthFix" />
						<text>现代</text>
					</navigator>
				</view>
				<view class="citem">
					<navigator url="/pages/products/products">
						<image src="/static/brand5.png" mode="widthFix" />
						<text>现代</text>
					</navigator>
				</view>
				<view class="citem">
					<navigator url="/pages/products/products">
						<image src="/static/brand6.png" mode="widthFix" />
						<text>现代</text>
					</navigator>
				</view>
				<view class="citem">
					<navigator url="/pages/products/products">
						<image src="/static/brand7.png" mode="widthFix" />
						<text>现代</text>
					</navigator>
				</view>
				<view class="citem">
					<navigator url="/pages/products/products">
						<image src="/static/brand8.png" mode="widthFix" />
						<text>现代</text>
					</navigator>
				</view>
				<view class="citem">
					<navigator url="/pages/products/products">
						<image src="/static/brand9.png" mode="widthFix" />
						<text>现代</text>
					</navigator>
				</view>
				<view class="citem">
					<navigator url="/pages/products/products">
						<image src="/static/brand10.png" mode="widthFix" />
						<text>现代</text>
					</navigator>
				</view>
			</view>

			<home-secKill></home-secKill>

			<view class="tabnav">
				<view :class="currentTab==0?'cur':''" data-curvalue="0" @click="showTab(0)">热卖车型</view>
				<view :class="currentTab==1?'cur':''" @click="showTab(1)">新车上市</view>
				<view :class="currentTab==2?'cur':''" @click="showTab(2)">促销车型</view>
			</view>
			<swiper style="height:945rpx" :current="currentTab" bindchange="changeTab" class="swtablist">
				<swiper-item>
					<home-plist :type="1"></home-plist>
				</swiper-item>
				<swiper-item>
					<home-plist :type="2"></home-plist>
				</swiper-item>
				<swiper-item>
					<home-plist :type="3"></home-plist>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		components: {
		},
		data() {
			return {
				currentTab: 0
			}
		},
		onLoad() {

		},
		methods: {
			showTab(cur){
				this.currentTab=cur;
			}

		}
	}
</script>

<style>
	/**index.wxss**/
	page {
		background: #F8F8FF;
	}

	.container {
		margin: 16rpx;
	}


	.catelist {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		background-color: white;
		margin: 0 auto 16rpx auto;
		width: 100%;
	}

	.citem {
		width: 20%;
		font-size: 28rpx;
	}

	.citem navigator {
		display: flex;
		flex-direction: column;
		text-align: center;
		margin: 4rpx;
		background-color: white;
		padding-bottom: 4rpx;
		border-radius: 8rpx;
		overflow: hidden;
	}

	.citem image {
		width: 100%;
	}

	

	.tabnav {
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 96rpx;
		z-index: 100;
		background-color: white;
	}

	.tabnav view {
		line-height: 80rpx;
		width: calc(100%/3);
		text-align: center;
		font-size: 32rpx;
		border-bottom: 1px solid #ccc;
	}

	.tabnav .cur {
		border-bottom: 2px solid #d81e06;
		color: #d81e06;
	}

	

	
</style>